<template>
    <div class="recent-play-container">
        <topper :arr="btnGroup.arr"></topper>
        <div class="songs-container">
            <song-single-list v-for="(item, index) of recentSongList.arr"
                              :id="item.id"
                              :index="index + 1"
                              :key="index"
                              :arts="item.arts"
                              :album="item.album"
                              :name="item.name"
                              @callNowPlayList="setNowPlayList"></song-single-list>
        </div>
    </div>
</template>

<script>
import songSingleList from "./recentPlay/songSingleList.vue";
import topper from "./global/topper.vue";
import {onActivated, onMounted, reactive} from "vue";
export default {
    name: "recentPlay",
    components:{
        topper,
        songSingleList
    },
    setup() {

        let recentSongList = reactive({
            arr:[]
        })

        let btnGroup = reactive({
            arr:[
                {name:'歌曲', checked:true},
                {name:'视频', checked:false},
                {name:'声音', checked:false},
                {name:'歌单', checked:false},
                {name:'专辑', checked:false},
                {name:'播客', checked:false},
            ]
        })

        function getRecentSong() {
            recentSongList.arr = JSON.parse(localStorage.getItem('recentPlay')).reverse()
        }

        function setNowPlayList() {
            console.log('我是最近播放')
        }

        onMounted(()=>{
            getRecentSong()
        })

        onActivated(()=>{
            getRecentSong()
        })

        return {
            btnGroup,
            recentSongList,
            setNowPlayList
        }
    }
}
</script>

<style scoped>
.recent-play-container {
    padding: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: scroll;
}

.songs-container {
    padding: 15px 0 0 20px;
    width: calc(1005 - 20px);
    height: auto;
}
</style>